<template>
	<view class="content padding-about-24">
		<view class="balance-section">
			<view style="padding: 28rpx;" class="">
				<view class="display-flex space-between">
					<view class="">
						<view class="font-size-22 color-FFF">
							钱包余额
						</view>
						<view class="margin-top-10 color-FFF">
							<text class="font-size-28">￥</text>
							<text class=" font-size-48 font-weight-bold">{{income.money}}</text>
						</view>
					</view>
					<view class="position-relative" style="width: 168.57rpx;height: 160.37rpx;">
						<image :src="imgaeUrl('/static/mine/qian.png')" style="width: 168.57rpx;height: 160.37rpx;" mode=""></image>
						<view @tap="navigateTo('/pages/Home/incomeDetails/incomeDetails')" class="position-absolute"
							style="top: 0;right: 0;">
							<view class="display-flex align-items">
								<view class="font-size-24 margin-right-10 color-FFF">
									余额明细
								</view>
								<view class="margin-top-05">
									<uv-icon name="arrow-right" color="#FFFFFF" size="12"></uv-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class=" display-flex space-between align-items">
					<view class="color-FFF">
						<view class="font-weight-bold">
							{{income.month_money}}
						</view>
						<view class="font-size-22 margin-top-10">
							本月预计到账
						</view>
					</view>
					<view class="color-FFF">
						<view class="font-weight-bold">
							{{income.last_month_money}}
						</view>
						<view class="font-size-22 margin-top-10">
							下月预计到账
						</view>
					</view>
					<view class="color-FFF">
						<view class="font-weight-bold">
							{{income.money}}
						</view>
						<view class="font-size-22 margin-top-10">
							待结算收益
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="navigateTo('/pages/Mine/addAlipay/addAlipay')" class="view display-flex space-between align-items margin-top-20">
			<view class="display-flex align-items ">
				<view class="font-size-28">
					提现至
				</view>
			</view>
			<view class="display-flex align-items">
				<image :src="userinfo?.headimg" class="border-radius" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="font-size-28 margin-left-20">
					{{userinfo?.nickname || '暂无昵称'}}
				</view>
			</view>
		</view>
		<view class="view margin-top-20">
			<view style="border-bottom: 1rpx #ECECEC solid;" class="display-flex align-items">
				<view class="font-size-54 font-weight-bold">
					￥
				</view>
				<view class="margin-left-20 file-1">

					<input v-model="money" type="number" class="font-size-54 font-weight-bold" placeholder="" />
				</view>
			</view>
			<view class="margin-top-20 display-flex align-items">
				<view class="font-size-24 margin-right-10" style="color: #7C7C7C;">
					钱包余额
				</view>
				<view class="font-size-24 font-weight-bold margin-right-10">
					¥{{income.money}}
				</view>
				<view @tap="money = income.money" class="font-size-24 font-weight-bold margin-right-10"
					style="color: #FE683E;">
					全部提现
				</view>
			</view>
			<view class="margin-top-40">
				<view class="font-size-28 font-weight-500">
					提现说明
				</view>
				<view class="font-size-24" style="color: #7C7C7C;">
					<view class="margin-top-10">
						1、提现至少{{config.min_cash || 10}}元起
					</view>
					<view class="margin-top-10">
						2、如果每月推广收益超5000元，请联系客服
					</view>
					<view class="margin-top-10">
						3、每笔提现手续费为{{config.cash_rate * 100 || 1}}%
					</view>
					<view class="margin-top-10">
						4、提现数据创建后再跳转的页面及时领取
					</view>
					<view class="margin-top-10">
						5、订单确认收货后15天结算佣金
					</view>
				</view>
			</view>
		</view>
		<view @tap="withdrawal()" class="button color-FFF margin-top-120 font-size-28" style="padding: 20rpx 300rpx;">
			去提现
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		geTel
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	const swiperlist = ref(['/static/logo.png', '/static/logo.png'])
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const income = ref({})
	const money = ref('')
	const userinfo = ref()
	const config = ref(local.get('config'))
	onLoad(function(option) {
		getincome()
	});
	onShow(function() {
		getusercenter()
	});
	async function getusercenter() {
		const {
			code,
			data
		} = await api.getuserinfo()
		if (code == 0) {
			userinfo.value = data
		}
	}
	async function withdrawal() {
		uni.showLoading({
			title: '申请中'
		})
		let object = {
			money: money.value,
		}
		const {
			code,
			data
		} = await api.withdrawal(object)
		uni.hideLoading();
		if (code == 0) {
			setTimeout(()=>{
				navigateTo('/pages/Mine/Withdrawal/Info?id='+data.id)
			},500)
		}
	}
	async function getincome() {
		const {
			code,
			data
		} = await api.income()
		if (code == 0) {
			income.value = data
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.view {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.balance-section {
		width: 702rpx;
		height: 294rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 24rpx;
	}
</style>